<table align="center" style="border: 1px solid #000;">
  <tr>
    <td align="center" colspan="2"><div id="titleObject"></div></td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td valign="top"><div id="territorySalesObject"></div></td>
        </tr>
        <tr>
          <td valign="top"><div id="productLineSalesObject"></div></td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td><div id="sampleObject"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">

  require(['cdf/Dashboard.Blueprint', 'cdf/components/CccDotChartComponent'],
    function(Dashboard, CccDotChartComponent) {

    var dashboard = new Dashboard();

    var relational_03 = {
      "resultset": [
        ["London", 74],
        ["Paris", 48],
        ["New York", 37],
        ["Prague", 27],
        ["Stockholm", 22],
        ["Sydney", 19],
        ["Madrid", 18],
        ["Lisbon", 41],
        ["Pequim", 7],
        ["Rome", 48],
        ["Athens", 27],
        ["Luanda", 76],
        ["Ottawa", 21],
        ["Berlin", 30],
        ["Brasilia", 50],
        ["Beijing", 41]
      ],
      "metadata": [
        {
          "colIndex": 0,
          "colType": "String",
          "colName": "City"
        }, {
          "colIndex": 1,
          "colType": "Numeric",
          "colName": "Value"
        }
      ]
    };

    var render_chart = new CccDotChartComponent({
      type: "cccDotChart",
      name: "cccChart",
      executeAtStart: false,
      htmlObject: "sampleObject",
      chartDefinition: {
        //compatVersion: 1,
        width:  600,
        height: 400,
        orientation: 'horizontal',

        // Data source
        crosstabMode: false,

        // Plots
        plots: [
          {
            // Main plot
            name: 'main',
            valuesVisible:   true,
            plot_fillStyle:  '#F7F8F9',
            dot_shape:       'triangle',
            dot_fillStyle:   '#FFC20F',
            dot_strokeStyle:   '#FFC20F',
            dot_shapeRadius: 3
          }
        ],
        valuesFont: 'lighter 11px "Open Sans"',

        // Cartesian axes
        axisLabel_font: 'normal 10px "Open Sans"',
        baseAxisLabel_textStyle: '#FFFFFF',
        baseAxis_fillStyle:  '#005CA7',
        orthoAxisLabel_textAlign: 'center',

        // Panels
        title:         "A Rich Dot Chart",
        titleFont:     'lighter 20px "Open Sans"',
        titlePosition: 'top',
        titleMargins:  '0 0 10 0',

        // Chart/Interaction
        animate:    false,
        selectable: true,
        hoverable:  true
      }
    });

    dashboard.addComponent(render_chart);

    dashboard.postInit = function initDummyData() {
      render_chart.render(relational_03);
    };

    dashboard.init();
  });
</script>
